<template>
  <div :avatar="currUser.avatar">
    <a-row style="margin: 0 -12px">
      <a-col style="padding: 0 12px" :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card class="project-list" :loading="loading" style="margin-bottom: 24px; width: 100%; height: calc(80vh);"
                :bordered="false"
                :title="'泳馆地图'" :body-style="{padding: 0}">
          <!--80vh为高度为屏幕的80%-->
          <a slot="extra"></a>
          <BaiDuMapSelf></BaiDuMapSelf>
        </a-card>
      </a-col>
      <a-col style="padding: 0 12px" :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
        <div style="height: calc(80vh)">
          <a-card :title="poolInfo.pool_name" style="margin-bottom: 2vh; height: 39vh" :bordered="false"
                  :body-style="{padding: 0}">
            <a slot="extra">
              <a-tag color="#2db7f5">
                {{ this.poolInfo.state }}
              </a-tag>
              <a-tag color="#f3533d">
                爆满
              </a-tag>
            </a>
            <div class="item-group clean-padding">
              <a-button size="small" block type="primary" ghost @click="changeSystemData" style="margin-bottom: -20px;">
                地址：{{ this.poolInfo.address }}
              </a-button>
              <MixLittleChart :pool-info-data="poolInfoData" :id="1"></MixLittleChart>
            </div>
          </a-card>
          <a-card :loading="loading" style="height: 39vh;padding: -20px !important;" :bordered="false">
<!--            <div class="sketchfab-embed-wrapper"> <iframe title="OSLO OPERA HOUSE" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share width="240" height="220" src="https://sketchfab.com/models/18d076c816194a04bb1e17e9c84c018e/embed?autospin=1&autostart=1&transparent=1"> </iframe> </div>-->
            <LittleGLTFModule slot="cover" />
          </a-card>
<!--          <a-card :loading="loading" title="系统实时状态" style="height: 39vh" :bordered="false">-->
<!--            <a-row style="margin: 0 -12px 8px -12px" class="info-card">-->
<!--              <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--                <a-card :body-style="{padding: '2px 2px 0 2px', margin: '0'}">-->
<!--                  <p style="font-size: 12px; text-align: center; font-weight: bolder">设备在线率</p>-->
<!--                  <p style="font-size: 20px; text-align: center;">98<span-->
<!--                      style="font-size: 12px; color: #1890ff"> %</span></p>-->
<!--                </a-card>-->
<!--              </a-col>-->
<!--              <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--                <a-card :body-style="{padding: '2px 2px 0 2px', margin: '0'}">-->
<!--                  <p style="font-size: 12px; text-align: center; font-weight: bolder">设备开机率</p>-->
<!--                  <p style="font-size: 20px; text-align: center;">95<span-->
<!--                      style="font-size: 12px; color: #1890ff"> %</span></p>-->
<!--                </a-card>-->
<!--              </a-col>-->
<!--              <a-col :xl="8" :lg="24" :md="24" :sm="24" :xs="24">-->
<!--                <a-card :body-style="{padding: '2px 2px 0 2px', margin: '0'}">-->
<!--                  <p style="font-size: 12px; text-align: center; font-weight: bolder">设备健康度</p>-->
<!--                  <p style="font-size: 20px; text-align: center;">96<span-->
<!--                      style="font-size: 12px; color: #1890ff"> 分</span></p>-->
<!--                </a-card>-->
<!--              </a-col>-->
<!--            </a-row>-->
<!--            <SystemInfo :system-info-data="systemInfoData"></SystemInfo>-->
<!--          </a-card>-->
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {request, METHOD} from '@/utils/request'
// import SystemInfo from "@/components/chart/SystemInfo"
import MixLittleChart from "@/components/echarts/MixLittleChart"
import Axios from "axios"
import LittleGLTFModule from "@/components/three/LittleGLTFModel";
import BaiDuMapSelf from "@/components/BaiDuMapSelf";

export default {
  name: 'WorkPlace',
  components: {BaiDuMapSelf, LittleGLTFModule, MixLittleChart},// SystemInfo
  i18n: require('./i18n'),
  data() {
    return {
      projects: [],
      loading: true,
      activities: [],
      teams: [],
      welcome: {
        timeFix: '',
        message: ''
      },
      // 服务器信息
      systemInfoData: {
        cpu: 3.2,
        memory: 21.1,
        disk: 12.6
      },
      // 泳池信息
      poolInfoData: {
        temperature: 28,
        waterLevel: 1.8,
        ph: 7,
        tds: 34,
        turbidity: 65,
        chlo: 12
      },
      poolInfo: {}
    }
  },
  computed: {
    ...mapState('account', {currUser: 'user'}),
    ...mapState('setting', ['lang'])
  },
  created() {
    request('/user/welcome', METHOD.GET).then(res => this.welcome = res.data)
    request('/work/activity', METHOD.GET).then(res => this.activities = res.data)
    request('/work/team', METHOD.GET).then(res => this.teams = res.data)
    request('/project', METHOD.GET).then(res => {
      this.projects = res.data
      this.loading = false
    })
  },
  mounted() {
    // TODO 暂时写死查询设备id
    this.getPoolInfoData("754684848")
    this.getPoolData("754684848")
  },
  methods: {
    changeSystemData() {
      this.systemInfoData.cpu = Math.floor(Math.random() * (23 - 12 + 1) + 1)
      this.systemInfoData.memory = Math.floor(Math.random() * (65 - 12 + 1) + 12)
      this.systemInfoData.disk = Math.floor(Math.random() * (55 - 12 + 1) + 12)
      this.poolInfoData.tds = Math.floor(Math.random() * (55 - 12 + 1) + 12)
      this.poolInfoData.turbidity = Math.floor(Math.random() * (55 - 12 + 1) + 12)
      this.poolInfoData.temperature = Math.floor(Math.random() * (33 - 24 + 1) + 24)
      this.poolInfoData.ph = Math.floor(Math.random() * (13 - 2 + 1) + 2)
      this.getPoolInfoData("754684848")
      this.getSystemInfoData()
    },
    getPoolInfoData(id) {
      Axios.get("http://119.3.218.80:8899/get", {
        params: {
          devId: id
        }
      }).then(res => {
        this.poolInfoData.tds = Number(res.data[0].value)
        this.poolInfoData.temperature = Number(res.data[1].value)
        this.poolInfoData.waterLevel = Number(res.data[2].value)
        this.poolInfoData.chlo = Number(res.data[3].value)
        this.poolInfoData.ph = Number(res.data[4].value)
        this.poolInfoData.turbidity = Number(res.data[5].value)
      }).catch(err => {
        console.log(err)
      })
    },
    getSystemInfoData() {
      Axios.get("http://119.3.218.80:8883/systemInfo/memory")
          .then(res => {
            this.systemInfoData.memory = res.data
          }).catch(err => {
        console.log(err)
      })
      Axios.get("http://119.3.218.80:8883/systemInfo/disk")
          .then(res => {
            this.systemInfoData.disk = res.data
          }).catch(err => {
        console.log(err)
      })
      Axios.get("http://119.3.218.80:8883/systemInfo/cpu")
          .then(res => {
            this.systemInfoData.cpu = res.data
          }).catch(err => {
        console.log(err)
      })
    },
    getPoolData(id) {
      Axios.get("http://119.3.218.80:8899/getPool", {
        params: {
          devId: id
        }
      }).then(res => {
        this.poolInfo = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less">
@import "index";
// 透明的
.transparent-card {
  background: rgba(0, 0, 0, 0) !important;
}

// 半透明的
.semitransparent-card {
  background: rgba(0, 0, 0, 0.2) !important;
}

.map {
  margin: 0 8px;
  width: 98%;
  height: 70vh;
}

.chart-card {
  padding: 12px !important;
}

.clean-padding {
  padding: 0 !important;
}

.info-card {
  height: 40px;
}
</style>
